<template>
  <div class="pop-container">
    <el-dialog :title="title" :visible.sync="visible" :width="width + 'px'" :before-close="handleClose" append-to-body
      :close-on-click-modal="false">
      <slot name="content"></slot>
      <div slot="footer" class="dialog-footer">
        <slot name="footer"></slot>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "pop",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "默认弹出层标题",
    },
    width: {
      type: Number,
      default: 800,
    },
  },
  data() {
    return {};
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      deep: false,
      immediate: true,
    },
  },
  methods: {
    cancle() {
      this.handleClose(false);
    },
    sub() { },
    handleClose(status) {
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
